<template>
    <div class="total">
                <span style="font-family:'思源黑体';font-weight:400;">共</span>
                <span style="font-family:'思源黑体 Bold', '思源黑体 ,Regular';font-weight:700;color:#9137F3;">{{Math.ceil(total/limit)}}</span>
                <span style="font-family:'思源黑体';font-weight:400;">页/</span>
                <span style="font-family:'思源黑体 Bold', '思源黑体 Regular', '思源黑体';font-weight:700;color:#9137F3;">{{total}}</span>
                <span style="font-family:'思源黑体';font-weight:400;">条数据</span>
                <el-pagination v-model:page-size="limit" :page-sizes="[10, 20, 30]" default background
                    @current-change="changePage" layout="prev, pager, next" :total="total" class="mt-4" />
    </div>    
</template>
<script setup>
import {ElPagination} from 'element-plus'
let page = ref(1);
let limit = ref(10);
let total = ref(0);
let changePage = function (value) {
    page.value = value;
    getData();
};
</script>
<style lang="less" scoped>
    .total {
    margin-top: 50px;
    margin-right: 28.8px;
    font-size: 12px;
    color: #333333;
    display: flex;
    align-items: center;
    float: right;
}
</style>
<style>
    .el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
    border-radius: 16px;
    border: 1px solid #9239f3;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev:hover {
    color: #ffffff;
    background-color: #9239f3;
}

.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev:disabled {
    color: #9239f3;
    background-color: #ffffff;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    color: #9239f3;
    background-color: #ffffff;
    border: 1px solid #9239f3;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li:hover {
    color: #ffffff;
    background-color: #9239f3;
}

.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
    color: #ffffff;
    background-color: #9239f3;
}
</style>